<template>
    <div class="inner" v-show="isShow" v-cloak>
        <div class="list" v-if="totalElements>0">
            <div class="unlock" v-if="tableType=='unlock'">
                <div class="list-item" v-for="(item,index) in list" :key="index">
                    <span>{{item.lockTime | filterTime}}</span>
                    <span>{{item.lockCount}}</span>
                    <span @click="cancelLock(item.lockNumber)" v-if="type==3" :class="{'light':type==3}">取消解锁</span>
                    <span v-else>{{item.lockStateValue}}</span>
                </div>
            </div>
            <div class="extract" v-else>
                <div class="title">最近交易记录</div>
                <div class="list-item" v-for="(item,index) in list" :key="index">
                    <div class="item-title">
                        <span class="extractCount">{{item.extractCount}}dlb</span>
                        <span class="extractStateValue">{{item.extractStateValue}}</span>
                        <mt-button class="extractBtn" type="primary" size="small" @click.native="copyCode(item.txNumber)">复制Txid</mt-button>
                    </div> 
                    <div class="item-address">
                        <span>地址：</span><span>{{item.extractAddress}}</span>
                    </div>   
                    <div class="item-txNumber">
                        <span>Txid：</span><span>{{item.txNumber}}</span>
                    </div>  
                    <div class="item-time">
                        <span>时间：</span><span>{{item.extractTime | filterTime}}</span>
                    </div> 
                </div>
            </div>
            <div class="more" @click="loadmore" v-show="!lastPage">查看更多</div>
        </div>
        <PictureTips :srcType="'nolist'" :text="'暂无数据'" v-else></PictureTips>
    </div>
</template>

<script>
import Clipboard from 'clipboard';
import { MessageBox, Toast } from 'mint-ui';
import { GetUnlockList, GetExtractList, PostCancelLock } from '@/api/api'
import PictureTips from "@/components/PictureTips/index.vue"
import { parseTime } from '@/utils/index'
export default {
    data: function () {
        return {
            isShow:false,
            pageSize:20,
            currentPage:1,
            lastPage:false,
            totalElements:0,
            list:[],
        }
    },
    props:{
        type:{
            type: String,
            default:"all"
        },
        tableType:{
            type: String,
            default:""
        }
    },
    mounted(){
        this.typePost();
    },
    components:{
        PictureTips
    },
    filters:{
        filterTime:function(val){
            return parseTime(val)
        }
    },
    methods: {
        copyCode(item){
            var clipboard = new Clipboard('.extractBtn', {
                text: function() {
                    return item;
                }
            });
            clipboard.on('success', e => {
                console.log('复制文本为：'+item);
                Toast({
                    message: '复制成功',
                    iconClass: 'icon iconfont icon-ic_check'
                });
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                Toast({
                    message: '不支持自动复制',
                    iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                });
                // 释放内存
                clipboard.destroy()
            })
        },
        getUnlockList(){
            const data = {
                pageSize:this.pageSize,
                currentPages:this.currentPage,
            }
            if( this.type != "all" ){
                data.unlockListType = this.type
            }

            GetUnlockList(data).then(res => {
                if( res.code == 200 ){
                    
                    this.list = this.list.concat(res.data.dataList);
                    this.currentPage = res.data.currentPages;
                    this.lastPage = res.data.lastPage;
                    this.totalElements = res.data.totalElements

                    this.$nextTick(() => {
                        this.isShow = true;
                    })
                }
            })
        },
        getExtractList(){
            GetExtractList({
                pageSize:this.pageSize,
                currentPages:this.currentPage
            }).then(res => {
                if( res.code == 200 ){
                    this.list = this.list.concat(res.data.dataList);
                    this.currentPage = res.data.currentPages;
                    this.lastPage = res.data.lastPage;
                    this.totalElements = res.data.totalElements

                    this.$nextTick(() => {
                        this.isShow = true
                    })
                }else{
                    
                }
            })
        },
        cancelLock(number){
            MessageBox({
                title:'',
                message: '确定要取消解锁吗?',
                closeOnClickModal:true,
                showCancelButton:true,
            }).then(action => {
                if (action == 'confirm') {   //确认的回调
                    PostCancelLock({
                        lockNumber:number
                    }).then(res => {
                        if( res.code == 200 ){
                            Toast({
                                message: "取消解锁成功"
                            });

                            // 取消解锁成功后 刷新列表
                            this.list = [];
                            this.currentPage = 1;
                            this.getUnlockList();
                        }else{
                            Toast({
                                message: res.msg
                            });
                        }
                    })
                }else{
                    console.log('取消的回调'); 
                }
            });
        },
        typePost(){
            if( this.tableType == 'unlock' ){
                this.getUnlockList();
            }
            if( this.tableType == 'extract' ){
                this.getExtractList()
            }
        },
        loadmore(){
            this.currentPage++;
            this.typePost();
        }
    }
}
</script>

<style lang="stylus" scoped>
.inner{
    margin-top:45px;
    .list{
        .unlock{
            margin-top:15px;
            .list-item{
                height:50px;
                line-height: 50px;
                color:rgba(102,102,102,1);
                border-bottom:1px solid rgba(227,227,227,1);
                padding:0 5px;
                display: flex;
                span{
                    &:first-child{
                        width:45%;
                    }
                    &:nth-child(2){
                        width:35%;
                    }
                    &:last-child{
                        width:20%;
                        text-align: right;
                        &.light{
                            color:#0055a4
                        }
                    }
                }
            }
        }
        .extract{
            .title{
                font-size:14px;
                color:#B3B3B3;
                padding-top:15px;
            }
            .list-item{
                color:#666;
                border-bottom:1px solid #eeeeee;
                &>div{
                    width:100%;
                    word-break:break-all;
                    height: 40px;
                    line-height:20px;
                    margin:5px 0;
                    position:relative;
                    span{
                        color:#666;
                        display:inline-block;
                        position:absolute;
                        top:0;
                        &:first-child{
                            color:#bfbfbf;
                            left:0;
                            width:50px;
                        }
                        &:last-child{
                            right:0;
                            padding-left:50px;
                        }
                    }
                    &.item-title{
                        height: 30px;
                        line-height:30px;
                        position:relative;
                        
                        span{
                            &.extractCount{
                                color:#666666;
                                width:auto;
                            }
                            &.extractStateValue{
                                right: 100px;
                            }
                        }
                        .extractBtn{
                            position:absolute;
                            right: 0;
                            width: 75px;
                            height: 30px;
                            line-height:30px;
                            padding: 0;
                            font-size: 12px;
                        }
                        
                    }
                    &.item-time{
                        height:25px;
                        span{
                            position: inherit;
                            &:last-child{
                                padding-left:0px;
                            } 
                        }
                    }
                }
            }
        }
        .more{
            text-align:center;
            margin-top:15px;
            margin-bottom:15px;
        }
    }
}
</style>
